<template>
  <div class="institution-container fs14p">
    <div class="container-search w100 flex flex-wrap">
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">活动名称</div>
          <el-input
            v-model="searchFormData.name"
            size="mini"
            class="w200p"
          ></el-input>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <div class="w100p pr10p textRight">状态</div>
          <el-select
            v-model="searchFormData.status"
            placeholder="请选择状态"
            size="mini"
            class="w200p"
          >
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </div>
      </div>
      <div class="w33 h29p lh29p mtb5">
        <div class="flex">
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <div class="w100 container-body">
      <div class="mt10">
        <el-button type="primary" size="mini" @click="showCreate"
          >添加优惠</el-button
        >
      </div>
      <div class="mt10 mb10">
        <el-table :data="list" border fit class="w100 tableBodyHeight">
          <el-table-column
            v-loading="loading"
            align="center"
            label="序号"
            width="65"
            element-loading-text="请给我点时间！"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="活动名称"
            class="cell"
          ></el-table-column>
          <el-table-column align="center" label="参与商品类型" class="cell">
            <template slot-scope="scope">
              <span>{{
                scope.row.appoint_type == 1
                  ? "全部商品"
                  : scope.row.appoint_type == 2
                  ? "全部自营商品"
                  : scope.row.appoint_type == 3
                  ? "指定商品参加"
                  : scope.row.appoint_type == 4
                  ? "指定商品不参加"
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" class="cell" width="100">
            <template slot-scope="scope">
              <div
                :style="{
                  color: scope.row.status == '1' ? '#20C997' : '#909399',
                }"
              >
                {{
                  scope.row.status == 0
                    ? "下架"
                    : scope.row.status == 1
                    ? "上架"
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="start_at"
            align="center"
            label="开始时间"
            class="cell"
          >
          </el-table-column>

          <el-table-column
            prop="end_at"
            align="center"
            label="结束时间"
            class="cell"
          >
          </el-table-column>

          <el-table-column class-name="status-col" label="操作" width="200">
            <template slot-scope="{ row }">
              <el-button type="primary" plain size="mini" @click="showEdit(row)"
                ><i class="el-icon-edit"></i
              ></el-button>
              <el-button type="danger" plain size="mini" @click="deleteRow(row)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-content flex w100 mt10">
          <el-pagination
            class="flex"
            background
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :fullscreen="true"
      :modal="false"
      :destroy-on-close="true"
      class="FormDialog"
      :title="dialogTitle"
      :visible.sync="isShowDetail"
      @close="onClose"
      :style="{ display: formDialogDisplay }"
    >
      <InstitutionDetail
        ref="InstitutionDetail"
        v-if="isShowDetail"
        :isShowDetail="isShowDetail"
        :detailData="detailData"
        @submitData="submitData"
        @cancel="cancel"
      ></InstitutionDetail>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, getShowInfo, deleteInstitution } from "@/api/institution";
import InstitutionDetail from "./components/InstitutionDetail";
import { color } from "echarts/lib/export";
import { parseTime } from "@/utils";
export default {
  name: "Institution",
  components: {
    InstitutionDetail,
  },
  data() {
    return {
      total: 10,
      dialogTitle: "",
      list: null,
      listQuery: {
        page: 1,
        limit: 5,
        type: "CN",
        sort: "+id",
      },
      searchFormData: {
        page: 1,
        pageSize: 10,
        // limit: 10,
        name: null,
        status: null,
      },
      detailData: {},
      loading: false,
      isShowDetail: false,
      formDialogDisplay: "none",
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      // this.$emit('create') // for test
      fetchList(this.searchFormData).then((response) => {
        this.list = response.data.data;
        this.searchFormData.page = response.data.current_page;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    search() {
      this.getList();
    },
    reset() {
      this.searchFormData = {
        page: 1,
        pageSize: 10,
        // limit: 10,
        name: null,
        status: null,
      };
      this.getList();
    },
    showCreate() {
      this.dialogTitle = "添加优惠";
      this.isShowDetail = true;
      this.formDialogDisplay = "flex";
    },
    showEdit(row) {
      // getShowInfo(row.id).then(response => {
      //   this.detailData = response.data
      // })
      this.dialogTitle = "修改满减信息";
      this.isShowDetail = true;
      this.formDialogDisplay = "flex";
      this.detailData = row;
    },
    deleteRow(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteInstitution(row.id).then(() => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    submitData() {
      this.isShowDetail = false;
      this.formDialogDisplay = "none";
      this.getList();
      this.$message.success("操作成功！");
    },
    onClose() {
      this.detailData = {};
      // this.$refs['InstitutionDetail'].resetData()
    },
    cancel() {
      this.isShowDetail = false;
    },
  },
};
</script>

<style scoped>
.institution-container {
  width: 98%;
  margin: 20px auto;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}

.container-search {
  background-color: #ecf5ff;
  border-color: #c3d3e2;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
.container-body {
  padding-left: 1%;
  padding-right: 1%;
}
.page-content {
  align-items: center;
  justify-content: center;
}

/deep/ .el-table thead {
  color: #767d88;
}
/deep/ .el-table__header-wrapper {
  height: 36px;
}
/deep/ .el-table--medium th {
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table--medium td {
  height: 36px;
  line-height: 1.5;
  padding: 0;
}
/deep/ .el-table thead th {
  background-color: #ecf5ff !important;
}
/deep/ .el-button--mini {
  font-weight: bold;
}
</style>
